<template>
  <div>
    <page-header-wrapper />
    <a-card :loading="loading" :title="$t('menu.site.content.carousel')" style="margin-top: 20px">
      <a slot="extra" @click="visible = true">添加轮播图组</a>
      <a-table
        :columns="columns"
        :data-source="carouselItems"
        bordered
        :rowKey="record=>record.carousel_group_id"
        :pagination="pagination"
      >
        <template slot="operation" slot-scope="text, record">
          <a @click="_updateCarousel(record)" style="float: left; margin-right: 10px;">编辑类目</a>
          <router-link target="_blank" style="float: left; margin-right: 10px;" :to="{path: `carousel_items/${record.carousel_group_id}`}">查看轮播图列表</router-link>
          <div class="editable-row-operations">
            <a-popconfirm :title="$t('form.basic-form.confirm.delete')" @confirm="() => _delCarousel(record)">
              <a>删除</a>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </a-card>
    <a-modal v-model="visible" title="编辑框" ok-text="确认" cancel-text="取消" @ok="_addCarousel">
      <a-form-item
      >
        轮播图分类名称：
        <a-input
          v-model="add.carousel_group_name"
        />
      </a-form-item>
    </a-modal>
  </div>
</template>

<script>
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'

import {
  getCarouselGroup,
  updateCarouselGroup,
  delCarouselGroup,
  addCarouselGroup
} from '@/api/carousel'

const columns = [
  {
    title: 'carousel_group_id',
    dataIndex: 'carousel_group_id',
    width: '25%',
    scopedSlots: { customRender: 'carousel_group_id' }
  },
  {
    title: 'carousel_group_name',
    dataIndex: 'carousel_group_name',
    width: '25%',
    scopedSlots: { customRender: 'carousel_group_name' }
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    width: '25%',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  name: 'Carousel',
  components: {
    PageHeaderWrapper
  },
  data () {
    return {
      loading: true,
      visible: false,
      searchForm: {
        page: 1
      },
      columns,
      carouselItems: [],
      pagination: {
        total: 0,
        onChange: (page) => {
          this.searchForm.page = page
          this._getCarouselGroup()
        }
      },
      add: {
        carousel_group_name: ''
      }
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.add = {
          carousel_group_name: ''
        }
      }
    }
  },
  mounted () {
    this._getCarouselGroup()
  },
  methods: {
    // 添加轮播图分类
    _getCarouselGroup () {
      getCarouselGroup(this.searchForm).then(res => {
        this.carouselItems = res.items
        this.pagination.total = res.count ? res.count : 0
        this.loading = false
      })
    },
    // 删除轮播图分类
    _delCarousel (item) {
      delCarouselGroup(item).then(res => {
        // code ...
        this._getCarouselGroup()
      })
    },
    // 添加轮播图分类
    _addCarousel () {
      if (this.add.carousel_group_id !== undefined) {
        updateCarouselGroup(this.add).then(res => {
          this.visible = false
        })
        return
      }
      addCarouselGroup(this.add).then(res => {
        res.items.carousel_group_id = res.items.id
        this.carouselItems.unshift(res.items)
        this.visible = false
      })
    },
    // 更新轮播图分类
    _updateCarousel (item) {
      this.visible = true
      setTimeout(() => {
        this.add = item
      }, 100)
    }
  }
}
</script>

<style scoped>
</style>
